<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="ele"></div>
  <script>
    // 延迟js脚本加载的一个方式
    // IntersectionObserver：检测指定元素，当他进入或离开视口的时候加载对应script
    let observer = new IntersectionObserver(
      (entries, observer) => {
        // console.log(entries)
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // console.log(entry.target)
            // console.log(entry.target.dataset.src)
            entry.target.src = entry.target.dataset.src;
            entry.target.removeAttribute('data-src');
          }
        });
      },
      {
        root: document.documentElement, // 监听元素的祖先元素Element对象，其边界盒将被视作视口。目标在根的可见区域的任何不可见部分都会被视为不可见。
        rootMargin: '0px 0px 0px 0px', // 设置被监听元素和视口之间的触发偏移量
        threshold: 1, // 0~1的小数，指定被监听元素和视口交叉部分所占被监听元素的百分比
      }
    );
    observer.observe(document.querySelector(".ele"))
  </script>
</body>

</html>
